<template>
  <!-- 退款申请 -->
  <div>
    <!-- 页面标题 -->
    <div id="refund-order-title">
      <h1 style="margin-left:50px">退款申请</h1>
    </div>

    <!-- 筛选条件 -->
    <div id="refund-order-select-div">
      <div class="refund-order-select-top">
        <i class="el-icon-set-up"
           style="margin-left:50px"></i>&nbsp;&nbsp;筛选
      </div>
      <div id="refund-order-select-bottom">
        <el-input v-model="accountsearch"
                  placeholder="输入用户名或患者姓名"
                  style="width:250px;margin-left:50px;float:left"></el-input>
        <div style="height: 100%;
  line-height: 100px;float:left;margin-left:50px">
          申请日期：</div>
        <el-date-picker v-model="selectdate"
                        type="date"
                        placeholder="注册日期"
                        style="float:left;width:200px;margin-left:50px"
                        value-format="yyyy/MM/dd HH:mm"
                        @click="search">
        </el-date-picker>
        <div style="height:100%;float:left;margin-left:30px">
          <el-button type="primary"
                     @click="search"
                     round>筛选</el-button>
        </div>
      </div>
    </div>

    <!-- 退款列表 -->
    <div id="refund-order-listdiv">
      <div class="refund-order-select-top">
        <i class="el-icon-tickets"
           style="margin-left:50px"></i>&nbsp;&nbsp;退款列表
      </div>
      <el-menu :default-active="activeIndex"
               class="el-menu-demo"
               mode="horizontal"
               @select="handleSelect">
        <el-menu-item index="全部"
                      style="width:20%;text-align:center">全部</el-menu-item>
        <el-menu-item index="待处理"
                      style="width:20%;text-align:center">待处理</el-menu-item>
        <el-menu-item index="已处理"
                      style="width:20%;text-align:center">已处理</el-menu-item>
        <el-menu-item index="已拒绝"
                      style="width:20%;text-align:center">已拒绝</el-menu-item>
      </el-menu>
      <!-- 条目展示 -->
      <div id="refund-order-refundlistdiv">
        <el-table ref="singleTable"
                  :data="tableData"
                  highlight-current-row
                  @current-change="handleCurrentChange"
                  style="width: 100%">
          <el-table-column type="index">
          </el-table-column>
          <el-table-column property="refundno"
                           label="退款编号">
          </el-table-column>
          <el-table-column property="applydate"
                           label="申请时间">
          </el-table-column>
          <el-table-column property="username"
                           label="用户名">
          </el-table-column>
          <el-table-column property="refundmoney"
                           label="退款金额">
          </el-table-column>
          <el-table-column property="refundclassify"
                           label="退款类型">
          </el-table-column>
          <el-table-column property="refundstatus"
                           label="退款状态">
          </el-table-column>
          <el-table-column property="refundmethod"
                           label="支付方式">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini"
                         @click="handleCheckRefund(scope.row.id)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>

      <!-- 全选、批量删除、页码 -->
      <div style="height:60px">
        <div id="refund-order-pagediv">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="currentpage"
                         :page-size="pagesize"
                         layout="prev, pager, next, jumper"
                         :total="totalpage">
          </el-pagination>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      //状态筛选
      activeIndex: '',
      //筛选
      accountsearch: '',
      selectdate: '',
      //列表
      multipleSelection: [],
      tableData: [],
      //分页
      currentpage: 1,
      pagesize: 10,
      totalpage: 1
    }
  },
  created () {
    //列表内容请求
    this.requestrefund();
  },
  methods: {
    //筛选
    search () {
      this.currentpage = 1;
      //列表内容请求
      this.requestrefund();
    },
    //查看退款申请
    handleCheckRefund (id) {
      this.$router.push("/index/refund-check/" + id);
      document.documentElement.scrollTop = 0;
    },
    //分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      console.log("current=" + this.currentpage);
      console.log("val=" + val);
      //列表内容请求
      this.requestrefund();
    },
    //状态筛选
    handleSelect (index) {
      this.activeIndex = index;
    },
    //订单请求
    requestrefund () {
      this.$axios({
        method: "get",
        url: "/refund/findRefund",
        params: {
          currentpage: this.currentpage,
          pagesize: this.pagesize,
          accountsearch: this.accountsearch,
          startselect: this.selectdate,
          state: this.activeIndex
        }
      }).then(res => {
        this.tableData = res.data.data.records;
        this.currentpage = res.data.data.current;
        this.totalpage = res.data.data.total;
      })
    },
  }
}
</script>
<style scoped>
* {
  /* border: 1px solid red; */
  border-radius: 3px;
}
/* 页面标题 */
#refund-order-title {
  margin-left: 50px;
  margin-right: 50px;
  height: 60px;
}
/* 筛选条件 */
#refund-order-select-div {
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 10px;
  border: 1px solid gainsboro;
  border-radius: 3px;
  overflow: hidden;
}
.refund-order-select-top {
  width: 100%;
  height: 50px;
  background-color: #f0f0f0;
  line-height: 50px;
  font-size: 20px;
}
.el-icon-set-up {
  font-size: 30px;
  margin-top: 10px;
}
#refund-order-select-bottom {
  width: 100%;
  height: 100px;
  line-height: 100px;
  font-size: 20px;
}
/* 退款列表 */
#refund-order-listdiv {
  margin-left: 50px;
  margin-right: 50px;
  border: 1px solid gainsboro;
  border-radius: 3px;
  overflow: hidden;
}
.el-icon-tickets {
  font-size: 30px;
  margin-top: 10px;
}
#refund-order-refundlistdiv {
  overflow: hidden;
}
/* 分页 */
#refund-order-pagediv {
  height: 50px;
  float: left;
  margin-left: 200px;
  margin-top: 10px;
}
el-table-column {
  overflow: hidden;
}
</style>